{% extends "base.html" %}
{% load staticfiles %}
{% load analysis_tags %}
{% block content %}

    <script src="/static/js/cuckoo/analysis_export.js"></script>

    <style>
        .btn-file {
            position: relative;
            overflow: hidden;
        }
        .btn-file input[type=file] {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 100%;
            min-height: 100%;
            font-size: 999px;
            text-align: right;
            filter: alpha(opacity=0);
            opacity: 0;
            background: red;
            cursor: inherit;
            display: block;
        }
        input[readonly] {
            background-color: white !important;
            cursor: text !important;
        }
    </style>

    <div class="flex-nav">
        {% include "analysis/pages/nav-sidebar.html" %}
        <section class="flex-nav__body">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-6">
                                <h4><span class="glyphicon glyphicon-save-file" aria-hidden-"true"=""></span> Export analysis</h4>

                                <form role="form" action="" method="post" enctype="multipart/form-data">{% csrf_token %}
                                    <div class="panel" id="accordion" style="margin-top: 20px;">
                                        <div class="panel-default">
                                            <div class="panel-heading">
                                                <label class="accordion-toggle">Options</label>
                                            </div>

                                            <div id="options" class="panel-collapse collapse in" style="text-align: left;">
                                                <div class="panel-body">
                                                    <p>Select which files you want to include in the export.</p><br>
                                                    <div class="col-md-6">
                                                        <div class="cuckoo-box">
                                                            {% for dirname, count in dirs %}
                                                                <div class="cuckoo-box-primary">
                                                                    <input type="checkbox" id="export_{{ dirname }}" name="dirs" value="{{ dirname }}" checked="checked">
                                                                    <label for="export_{{ dirname }}">{{ dirname }} ({{ count }} files)</label>
                                                                </div>
                                                            {% endfor %}
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <div class="cuckoo-box">
                                                            {% for filename in files %}
                                                                <div class="cuckoo-box-primary">
                                                                    <input type="checkbox" name="files" id="export_{{ filename }}" value="{{ filename }}" checked="checked">
                                                                    <label for="export_{{ filename }}">{{ filename }}</label>
                                                                </div>
                                                            {% endfor %}
                                                        </div>
                                                    </div>

                                                    <div class="col-md-12">
                                                        <hr>

                                                        <div class="tabbable">
                                                            <div class="tab-content" style="margin-top:0px;">
                                                                <div class="tab-pane fade in active" id="file">

                                                                    <div class="input-group col-md-6" style="margin-left: auto;margin-right: auto;">
                                                                        <label style="display: flex;">Chosen analysis nr.{{report.analysis.info.id}} to export </label>
                                                                        {% if report.analysis.info.category == "file" %}
                                                                        <input type="text" class="form-control" value="{{report.analysis.target.file.name}}" disabled>
                                                                        {% elif report.analysis.info.category == "url" %}
                                                                        <input type="text" class="form-control" value="{{report.analysis.target.url}}" disabled>
                                                                        <!-- This else is made only for testing purposes. Will be deleted when testing is done. -->
                                                                        {% else %}
                                                                        <input type="text" class="form-control" value="Unknown" disabled>
                                                                        {% endif %}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <hr>

                                                        <div class="col-md-12 center-block">
                                                            <button type="submit" class="btn btn-primary center-block" style="min-width: 170px;text-align: left;">
                                                                <span style="margin-right: 4px;" class="glyphicon glyphicon-download"></span>
                                                                Download
                                                                <small id="export_estimate_size"></small>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- footer replacement to avoid double scrollbars -->
            <footer class="flex-grid__footer spread-alignment">
                <p class="footnote">
                    &copy;2010-2018 <a href="https://www.cuckoosandbox.org" target="_blank">Cuckoo Sandbox</a>
                </p>
                <div class="logo">
                    <img src="{% static "graphic/cuckoo_inverse.png" %}" alt="Cuckoo Malware Analysis Sandbox" />
                    <a href="#">Back to Top</a>
                </div>
            </footer>
            
        </section>
    </div> 

    {% if report.analysis.info.id %}
        <script>
            var task_id = {{report.analysis.info.id}};

            $( document ).ready(function(){
                $(".cuckoo-box input").change(function(){
                    estimate_size();
                });

                function estimate_size() {

                    var taken_dirs = [];
                    var taken_files = [];

                    $(".cuckoo-box input[id^=export_]").each(function (i, obj) {
                        var name = $(this).attr("value");
                        var type = $(this).attr("name");
                        var checked = $(this).is(":checked");

                        if (type == "dirs") {
                            if (checked) taken_dirs.push(name)
                        } else if (type == "files") {
                            if (checked) taken_files.push(name);
                        }
                    });

                    export_estimate_size(task_id, taken_dirs, taken_files, "#options button.btn small#export_estimate_size", "");

                }

                estimate_size();
                
            });
        </script>
    {% endif %}

{% endblock %}
